import React, {Component} from 'react';


interface ClassComponentState {
    count: number;
    text: string;
}

interface CounterButtonProps {
    initialCount?: number;
}

// 类组件示例
export class TestReactLifecycleClass extends Component<CounterButtonProps, ClassComponentState> {
    constructor(props) {
        super(props);
        this.state = {
            count: this.props.initialCount,
            text: 'Hello'
        };
        console.log('类组件: constructor');
    }

    static getDerivedStateFromProps(props, state) {
        console.log('类组件: getDerivedStateFromProps');
        return null;
    }

    componentDidMount() {
        console.log('类组件: componentDidMount');
    }

    shouldComponentUpdate(nextProps, nextState) {
        console.log('类组件: shouldComponentUpdate');
        return true;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('类组件: getSnapshotBeforeUpdate');
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('类组件: componentDidUpdate');
    }

    componentWillUnmount() {
        console.log('类组件: componentWillUnmount');
    }

    render() {
        console.log('类组件: render');
        return (
            <div style={{border: '1px solid red', padding: '10px', margin: '10px'}}>
                <h2>类组件 (使用生命周期方法)</h2>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.setState({count: this.state.count + 1})}>
                    增加 Count
                </button>

                <p>Text: {this.state.text}</p>
                <input value={this.state.text}
                       onChange={(e) => this.setState({text: e.target.value})}/>
            </div>
        );
    }
}
